<template>
  <view class="modern-login-container">
    <view class="background-decoration"></view>
    <view class="login-card">
      <view class="logo-content">
        <view class="logo-wrapper">
          <image class="logo-image" :src="globalConfig.appInfo.logo" mode="widthFix"></image>
        </view>
        <text class="app-title">欢迎登录</text>
        <text class="app-subtitle">请输入您的账号信息</text>
      </view>
      <view class="form-content">
        <view class="input-group">
          <view class="input-wrapper">
            <view class="input-icon iconfont icon-user"></view>
            <input v-model="loginForm.username" class="modern-input" type="text" placeholder="请输入账号" maxlength="30" />
          </view>
        </view>
        
        <view class="input-group">
          <view class="input-wrapper">
            <view class="input-icon iconfont icon-password"></view>
            <input v-model="loginForm.password" type="password" class="modern-input" placeholder="请输入密码" maxlength="20" />
          </view>
        </view>
        
        <view class="input-group captcha-group" v-if="captchaEnabled">
          <view class="input-wrapper captcha-input">
            <view class="input-icon iconfont icon-code"></view>
            <input v-model="loginForm.code" type="number" class="modern-input" placeholder="请输入验证码" maxlength="4" />
          </view>
          <view class="captcha-image-wrapper" @click="getCode">
            <image :src="codeUrl" class="captcha-image"></image>
            <text class="refresh-text">点击刷新</text>
          </view>
        </view>
        
        <view class="login-button-wrapper">
          <button @click="handleLogin" class="modern-login-btn">登录</button>
        </view>
        
        <view class="register-link" v-if="register">
          <text class="register-text">没有账号？</text>
          <text @click="handleUserRegister" class="register-action">立即注册</text>
        </view>
        
        <view class="agreement-section">
          <text class="agreement-text">登录即代表同意</text>
          <text @click="handleUserAgrement" class="agreement-link">《用户协议》</text>
          <text @click="handlePrivacy" class="agreement-link">《隐私协议》</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { getCodeImg } from '@/api/login'
  import { getToken } from '@/utils/auth'

  export default {
    data() {
      return {
        codeUrl: "",
        captchaEnabled: true,
        // 用户注册开关
        register: false,
        globalConfig: getApp().globalData.config,
        loginForm: {
          username: "admin",
          password: "admin123",
          code: "",
          uuid: ""
        }
      }
    },
    created() {
      this.getCode()
    },
    onLoad() {
      //#ifdef H5
      if (getToken()) {
        this.$tab.reLaunch('/pages/index')
      }
      //#endif
    },
    methods: {
      // 用户注册
      handleUserRegister() {
        this.$tab.redirectTo(`/pages/register`)
      },
      // 隐私协议
      handlePrivacy() {
        let site = this.globalConfig.appInfo.agreements[0]
        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
      },
      // 用户协议
      handleUserAgrement() {
        let site = this.globalConfig.appInfo.agreements[1]
        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
      },
      // 获取图形验证码
      getCode() {
        getCodeImg().then(res => {
          this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
          if (this.captchaEnabled) {
            this.codeUrl = 'data:image/gif;base64,' + res.img
            this.loginForm.uuid = res.uuid
          }
        })
      },
      // 登录方法
      async handleLogin() {
        if (this.loginForm.username === "") {
          this.$modal.msgError("请输入账号")
        } else if (this.loginForm.password === "") {
          this.$modal.msgError("请输入密码")
        } else if (this.loginForm.code === "" && this.captchaEnabled) {
          this.$modal.msgError("请输入验证码")
        } else {
          this.$modal.loading("登录中，请耐心等待...")
          this.pwdLogin()
        }
      },
      // 密码登录
      async pwdLogin() {
        this.$store.dispatch('Login', this.loginForm).then(() => {
          this.$modal.closeLoading()
          this.loginSuccess()
        }).catch(() => {
          if (this.captchaEnabled) {
            this.getCode()
          }
        })
      },
      // 登录成功后，处理函数
      loginSuccess(result) {
        // 设置用户信息
        this.$store.dispatch('GetInfo').then(res => {
          this.$tab.reLaunch('/pages/index')
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
  }

  .modern-login-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40rpx;
    box-sizing: border-box;
  }

  .background-decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    opacity: 0.9;
    z-index: 1;
  }

  .background-decoration::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 50rpx 50rpx;
    animation: float 20s ease-in-out infinite;
  }

  @keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
  }

  .login-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 600rpx;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 32rpx;
    padding: 60rpx 50rpx;
    box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .logo-content {
    text-align: center;
    margin-bottom: 60rpx;
  }

  .logo-wrapper {
    margin-bottom: 30rpx;
  }

  .logo-image {
    width: 120rpx;
    height: 120rpx;
    border-radius: 24rpx;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
  }

  .app-title {
    display: block;
    font-size: 48rpx;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 16rpx;
    letter-spacing: 1rpx;
  }

  .app-subtitle {
    display: block;
    font-size: 28rpx;
    color: #718096;
    font-weight: 400;
  }

  .form-content {
    width: 100%;
  }

  .input-group {
    margin-bottom: 32rpx;
  }

  .input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 2rpx solid #e2e8f0;
    border-radius: 16rpx;
    transition: all 0.3s ease;
    overflow: hidden;
  }

  .input-wrapper:focus-within {
    border-color: #667eea;
    background: #ffffff;
    box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1);
  }

  .input-icon {
    padding: 0 24rpx;
    font-size: 32rpx;
    color: #a0aec0;
    transition: color 0.3s ease;
  }

  .input-wrapper:focus-within .input-icon {
    color: #667eea;
  }

  .modern-input {
    flex: 1;
    height: 88rpx;
    font-size: 32rpx;
    color: #2d3748;
    background: transparent;
    border: none;
    outline: none;
    padding-right: 24rpx;
  }

  .modern-input::placeholder {
    color: #a0aec0;
    font-size: 30rpx;
  }

  .captcha-group {
    display: flex;
    gap: 20rpx;
    align-items: flex-start;
  }

  .captcha-input {
    flex: 1;
  }

  .captcha-image-wrapper {
    position: relative;
    width: 200rpx;
    height: 88rpx;
    border-radius: 16rpx;
    overflow: hidden;
    border: 2rpx solid #e2e8f0;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .captcha-image-wrapper:hover {
    border-color: #667eea;
    transform: translateY(-2rpx);
  }

  .captcha-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .refresh-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 20rpx;
    text-align: center;
    padding: 4rpx 0;
  }

  .login-button-wrapper {
    margin: 60rpx 0 40rpx 0;
  }

  .modern-login-btn {
    width: 100%;
    height: 88rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 16rpx;
    color: white;
    font-size: 32rpx;
    font-weight: 600;
    letter-spacing: 2rpx;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
  }

  .modern-login-btn:hover {
    transform: translateY(-4rpx);
    box-shadow: 0 12rpx 32rpx rgba(102, 126, 234, 0.4);
  }

  .modern-login-btn:active {
    transform: translateY(-2rpx);
  }

  .register-link {
    text-align: center;
    margin-bottom: 32rpx;
  }

  .register-text {
    font-size: 28rpx;
    color: #718096;
  }

  .register-action {
    font-size: 28rpx;
    color: #667eea;
    font-weight: 500;
    margin-left: 8rpx;
    cursor: pointer;
    transition: color 0.3s ease;
  }

  .register-action:hover {
    color: #5a67d8;
  }

  .agreement-section {
    text-align: center;
    line-height: 1.6;
  }

  .agreement-text {
    font-size: 24rpx;
    color: #a0aec0;
  }

  .agreement-link {
    font-size: 24rpx;
    color: #667eea;
    margin: 0 8rpx;
    cursor: pointer;
    transition: color 0.3s ease;
  }

  .agreement-link:hover {
    color: #5a67d8;
    text-decoration: underline;
  }

</style>
